<template>
  <div class="goods">
    <div class="yue">
     余额：{{money.money}}
    </div>
    <div class="box">
        <div class="left">
            <div class="top">
                {{this.$route.query.title}}
            </div>
            <div class="bottom">
                ￥{{this.$route.query.jiage}}.00
            </div>
        </div>
        <div class="right">
            <div class="d1" @click="funa" v-if="bool">取消</div>
            <div class="d2" @click="funb">{{text}}</div>
        </div>
    </div>
  </div>
</template>

<script>
import link from "@/api/link.js"
export default {
    data(){
        return{
            money:{},
            bool:true,
            text:"确定"
        }
    },

    methods:{
        funa(){
            this.$router.push("/xianshang")
        },
        funb(){
            this.money.money-=this.$route.query.jiage
            this.bool=false
            this.text="购买成功"
        }
    }
    ,created(){
        link("/gouwu","post").then((ok)=>{
            
            this.money=ok.data.goumai
            console.log(this.money)
            
        })
    }
}
</script>

<style scoped lang="scss">
    .goods{
        width: 100%;
        height: 100%;
        .yue{
            width: 90%;
            height: 0.5rem;
            background-color: aliceblue;
            margin: auto;
            border-radius: 0.1rem;
            font-size: 0.16rem;
            line-height: 0.5rem;
        }
        .box{
            width: 90%;
            height: 0.8rem;
            background-color: white;
            margin: 0.1rem auto;
            display: flex;
            border: 0.01rem solid gainsboro;

            .left{
                width: 70%;
                height: 100%;
                .top{
                    width: 100%;
                    height: 50%;
                    font-size: 0.16rem;
                    line-height: 0.4rem;
                    border-bottom: 0.01rem solid gainsboro;
                }
                .bottom{
                    width: 100%;
                    height: 50%;
                    font-size: 0.16rem;
                    line-height: 0.4rem;
                    color: red;
                }
            }
            .right{
                width: 30%;
                height: 100%;
                .d1{
                    font-size: 0.22rem;
                    text-align: center;
                    line-height: 0.4rem;
                    background-color: red;
                }
                .d2{
                    font-size: 0.22rem;
                    text-align: center;
                    line-height: 0.4rem;
                    background-color: green;
                }
            }
        }
    }
</style>